<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>规格管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->
<div class="box-header with-border">
    <h3 class="box-title">规格管理</h3>
</div>
<div class="box-body">
    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#add"><i
                            class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" onclick="deleteIds()" title="删除"><i
                            class="fa fa-trash-o"></i> 删除
                    </button>

                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>

        <div class="box-tools pull-right">
            <div class="has-feedback">
                规格名称：<input type="text" name="specName">
                <button class="btn btn-default" onclick="getSpecList()">查询</button>
            </div>
        </div>
        <!--工具栏/-->
        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">规格ID</th>
                <th class="sorting">规格名称</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="spec">


            </tbody>
        </table>
        <!--数据列表/-->
    </div>
    <!-- 数据表格 /-->
</div>
<!-- /.box-body -->


<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">规格编辑</h3>
            </div>
            <div class="modal-body">

                <form id="specificationID">
                    <table class="table table-bordered table-striped" width="800px" id="specc">
                    </table>
                </form>

                <!-- 规格选项 -->
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建"><i class="fa fa-file-o"></i> 新增规格选项
                    </button>
                </div>

                <table id="specTableupdate" class="table table-bordered table-striped table-hover dataTable">
                    <thead>
                        <th class="sorting">规格选项</th>
                        <th class="sorting">排序</th>
                        <th class="sorting">操作</th>

                    </thead>
                    <tbody id="specbody">

                    </tbody>
                </table>


            </div>
            <div class="modal-footer">
                <button class="btn btn-success" onclick="updates()" data-dismiss="modal" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!--增加-->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">规格编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>规格名称</td>
                        <td><input class="form-control" id="specName" name="specName" placeholder="规格名称"></td>
                    </tr>
                </table>

                <!-- 规格选项 -->
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建"><i class="fa fa-file-o"></i> 新增规格选项
                    </button>

                </div>

                <table id="specOption" class="table table-bordered table-striped table-hover dataTable">
                    <thead>
                    <tr>


                        <th class="sorting">规格选项</th>
                        <th class="sorting">排序</th>
                        <th class="sorting">操作</th>
                    </thead>
                    <tbody>
                    <tr>

                        <td>
                            <input class="form-control" name="optionName" placeholder="规格选项">
                        </td>
                        <td>
                            <input class="form-control" name="orders" placeholder="排序">
                        </td>
                        <td>
                            <button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除
                            </button>
                        </td>
                    </tr>
                    <tr>

                        <td>
                            <input class="form-control" name="optionName" placeholder="规格选项">
                        </td>
                        <td>
                            <input class="form-control" name="orders" placeholder="排序">
                        </td>
                        <td>
                            <button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除
                            </button>
                        </td>
                    </tr>
                    <tr>

                        <td>
                            <input class="form-control" name="optionName" placeholder="规格选项">
                        </td>
                        <td>
                            <input class="form-control" name="orders" placeholder="排序">
                        </td>
                        <td>
                            <button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>


            </div>
            <div class="modal-footer">
                <button class="btn btn-success" onclick="insert()" data-dismiss="modal" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    $(function () {
        getSpecList();
    })

    function getSpecList() {
        $.ajax({
            url: "/spec/specList?specName=" + $("#specName").val(),
            //data : {pageNum : $("#pageNum").val(),pageSize : $("#pageSize").val()},
            async: false,
            dataType: "json",
            type: "post",
            success: function (result) {
                //console.log(result)
                var list = result.data;
                var tbody = "";
                for (var i = 0; i < list.length; i++) {
                    tbody += '<tr>';
                    tbody += '<td> <input type = "checkbox" name="check" value="' + list[i].id + '"> </td>';
                    tbody += '<td>' + list[i].id + '</td>';
                    tbody += '<td>' + list[i].specName + '</td>';
                    tbody += '<td className="text-center">';
                    tbody += '<button type="button" onclick="toupda(' + list[i].id + ')" className="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改';
                    tbody += '</button>';
                    tbody += '</td>';
                    tbody += '</tr>';
                }
                $("#spec").html(tbody);
            }, error: function (data) {
                console.log("系统异常")
            }
        })
    }

    function insert() {
        //获取表格里的所有tr
        var trs = $("#specOption").find("tr")
        var list = [];
        for (var i = 1; i < trs.length; i++) {
            var tds = $(trs[i]).find('td');  //每个tr里有多个td
            var name = $(tds[0]).find('input').val()
            var order = $(tds[1]).find('input').val()
            //获取到所有值后 用list接收
            list.push({optionName: name, orders: order})
            //转换成json格式的字符串
            var listJson = JSON.stringify(list)
        }
        $.ajax({
            url: "/spec/add",
            type: "post",
            dataType: "json",
            data: {jsonList: listJson, specName: $("#specName").val()},
            async: true,
            success: function (result) {
                if (result.code == 10000) {
                    alert("增加成功");
                }
            },
            error: function (result) {
                alert("系统错误,请稍后再试");
            }
        })
    }

    function toupda(obj) {
        $.ajax({
            url: "/spec/toupda",
            data: {id: obj},
            async: false,
            dataType: "json",
            type: "post",
            success: function (result) {
                console.log(result)
                if (result.code == 10000) {
                    var list = result.data;
                    var str = '';
                    var sdr = '';
                    str += '<tr>'
                    str += '<td>规格名称</td>'
                    str += '<td><input className="form-control" placeholder="规格名称" name="specName" value="' + list[0].specName + '"><input type="hidden" name="id" value="' + list[0].id + '"></td>'
                    str += '</tr>'
                    str += ''
                    $("#specc").html(str)

                    for (var i = 0; i < list.length; i++) {
                        sdr += '<tr>'
                        sdr += '<td>'
                        sdr += '<input  class="form-control" placeholder="规格选项" name="optionName" value="' + list[i].optionName + '">'
                        sdr += '</td>'
                        sdr += '<td>'
                        sdr += '<input className="form-control" placeholder="排序" name="orders" value="' + list[i].orders + '">'
                        sdr += '</td>'
                        sdr += '<td>'
                        sdr += '<button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>'
                        sdr += '</td>'
                        sdr += '</tr>'
                    }
                    $("#specbody").html(sdr)

                }
            }
            ,
            error: function (result) {
                console.log("系统错误")
            }

        })
    }

    function updates() {
        alert("修改")
        var trs = $("#specTableupdate").find("tr")
        var list = []
        for (var i = 1; i < trs.length; i++) {
            var tds = $(trs[i]).find('td')
            var name = $(tds[0]).find('input').val()
            var order = $(tds[1]).find('input').val()
            list.push({optionName: name, orders: order})
        }
        var jsonlist = JSON.stringify(list)
        console.log(jsonlist)
        $.ajax({
            url: "/spec/update",
            type: "post",
            dataType: "json",
            data: $("#specificationID").serialize() + "&jsonlist=" + jsonlist,
            async: true,
            success: function (result) {
                if (result.code == 10000) {
                    alert("修改成功");
                }
            },
            error: function (result) {
                alert("系统错误,请稍后再试");
            }
        })
    }

    function deleteIds() {
        var arr = document.getElementsByName("check");
        var ids = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].checked) {
                ids.push(arr[i].value);
            }
        }

        $.ajax({
            url: "/spec/deleteByIds?ids=" + ids,
            //data:{ids:ids},
            async: true,
            type: "post",
            dataType: "json",
            success: function (result) {
                if (result == 10000) {
                    alert("删除成功");
                }
            },
            error: function (result) {
                console.log("系统错误")
            }
        })
    }
</script>
</html>